<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
     <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
    <title>齐天大圣官方独立公司</title>
    ﻿<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="alternate icon" type="image/png" href="images/favicon.png">
<link rel='icon' href='favicon.ico' type='image/x-ico' />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/default.min.css?t=227" />
<script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="lib/handlebars/handlebars.min.js"></script>
<script type="text/javascript" src="lib/iscroll/iscroll-probe.js"></script>
<script type="text/javascript" src="lib/amazeui/amazeui.min.js"></script>
<script type="text/javascript" src="lib/raty/jquery.raty.js"></script>
<script type="text/javascript" src="js/main.min.js?t=1"></script>
<style type="text/css">
	.td9 {
	    font-size: 17px;
			}
	#h1h {
		color: mediumpurple;
		font-family: 楷体;
		font-size: 38px;
		font-weight: bold;
			}
	.span2 {
		font-size: 21px;
			}
	#dandu {
		color: black;
		font-weight: bold;
			}
	.zuihouanniu {
		color: black;
			}	
	.zuihouanniu:hover{
		color: black;
	}	
	.cor{
		color: #269ABC;
	}
	.cor:hover{
		color: skyblue;
	}	
	
	
	ul{list-style-type:none;}
	.ysA{text-decoration:none;color:black;}
	#nav{line-height:30px;}
	#nav li{float:left;width:100px;}
	#nav li .ysA{display:block;width:100px;background:#EB7350;text-align:center;}
	#nav li .ysA:hover{background:#666;color:#fff;font-weight:bold;}
	#nav li ul{line-height:20px;position:absolute;display:none;}
	#nav li ul li{float:left;width:130px;}
	#nav li ul li a{display:block;width:130px;background:#666;text-align:left;padding-left:30px;}
	#nav li ul li a:hover{background:red;font-weight:normal;}
	#pro-category li:nth-child(3){background:red !important;}
	
	
	
</style>
<script type="text/javascript" src="http://pic.veryhuo.com/uploads/common/js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
var key=$("#nav>li");
key.mouseover(function(){
$(this).children(".nn1").fadeIn();
});
key.mouseout(function(){
$(this).children(".nn1").fadeOut();
});
});
</script>
</head>
<body>
<jsp:include page="/headerServlet"></jsp:include>





<section class="pro-list">
    <aside class="pro-leftsidebar">
        <ul>
            <li>
                <a>产品搜索</a>
                <ul id="pro-search">
                    <li><a><input type="text"  class="pro-search"><a class="pro-search-btn">搜索</a></a></li>
                </ul>
            </li>
            <li>
                <a>产品分类</a>
                <ul id="pro-category">
                     <c:forEach items="${ProductType }" var="l">
                   <li>${l.productTypeName }</li>
                   </c:forEach>
                </ul>
            </li>
        </ul>
    </aside>

    <aside class="pro-rightsidebar">
        <header>
            <p></p>
            <span>化妆品系列</span>
            <div class="product-nav"><a href="index.jsp">首页 </a>&#62;<a href="productlist.jsp">产品展示</a>&#62;<a href="productlist.jsp">化妆品系列</a>&#62;<a href="productlist.jsp">返回</a></div>
        </header>
        <main>
            <div class="pro-right-left">
                <div class="pro-details-img"><img src="img/f1.jpg"></div>
                <div class="pro-detalis-carousel">
                    <div class="am-slider am-slider-default am-slider-carousel" data-am-flexslider="{itemWidth: 112, itemMargin: 4,move:5,  controlNav: false ,  slideshow: true}">
                        <ul class="am-slides pro-details">
                             <c:forEach items="${picture }" var="l">
                         <li><img src="${l.imgUrl }" /></li>
						</c:forEach>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="pro-right-right">
                <ul class="pro-right-info-constant">
                    <li>产品名称:</li>
                    <li>产品材质:</li>
                    <li>产品售价:</li>
                    <li>市场价:</li>
                </ul>
                <ul class="pro-right-info-variable">
                    <li>${product.proName }</li>
                    <li>${product.proMateral }</li>
                    <li>${product.salePrice }</li>
                    <li>${product.marketPrice }</li>
                </ul>
            </div>

            <div class="am-tabs pro-tabs" data-am-tabs>
                <ul class="am-tabs-nav am-nav am-nav-tabs">
                    <li class="am-active"><a href="#tab1">详细说明1</a></li>
                    <li><a href="#tab2">详细说明2</a></li>
                    <li><a href="#tab3">详细说明3</a></li>
                    <li><a href="#tab4">详细说明4</a></li>
                </ul>

                <div class="am-tabs-bd">
                    <div class="am-tab-panel am-active" id="tab1">
                        <ul>
                           <li>
                                    <span class="pro-tabs-constant">品牌:</span>
                                    <span class="pro-tabs-variable">${product.brand }</span>
                                </li>
                                <li>
                                    <span class="pro-tabs-constant">是否组装:</span>
                                    <span class="pro-tabs-variable">${product.zuZhuang }</span>
                                </li>
                                <li>
                                    <span class="pro-tabs-constant">是否可定制:</span>
                                    <span class="pro-tabs-variable">${product.dingZhi }</span>
                                </li>
                                <li>
                                    <span class="pro-tabs-constant">型号:</span>
                                    <span class="pro-tabs-variable">${product.model }</span>
                                </li>
                                <li>
                                    <span class="pro-tabs-constant">颜色分类:</span>
                                    <span class="pro-tabs-variable">${product.color }</span>
                                </li>
                                <li>
                                    <span class="pro-tabs-constant">设计元素:</span>
                                    <span class="pro-tabs-variable">${product.yuanSu }</span>
                                </li> <li>
                                <span class="pro-tabs-constant">风格:</span>
                                <span class="pro-tabs-variable">${product.styles }</span>
                            </li>
                                <li>
                                    <span class="pro-tabs-constant">款式定位:</span>
                                    <span class="pro-tabs-variable">${product.kuanShi }</span>
                                </li>
                        </ul>
                    </div>
                    <div class="am-tab-panel" id="tab2">
						<ul>
						    <li>
						            <span class="pro-tabs-constant">品牌:</span>
						            <span class="pro-tabs-variable">雅诗兰黛</span>
						        </li>
						        <li>
						            <span class="pro-tabs-constant">是否组装:</span>
						            <span class="pro-tabs-variable">NO</span>
						        </li>
						        <li>
						            <span class="pro-tabs-constant">是否可定制:</span>
						            <span class="pro-tabs-variable">yes</span>
						        </li>
						        <li>
						            <span class="pro-tabs-constant">型号:</span>
						            <span class="pro-tabs-variable">0000007</span>
						        </li>
						        <li>
						            <span class="pro-tabs-constant">颜色分类:</span>
						            <span class="pro-tabs-variable">多彩</span>
						        </li>
						        <li>
						            <span class="pro-tabs-constant">设计元素:</span>
						            <span class="pro-tabs-variable">大师设计</span>
						        </li> <li>
						        <span class="pro-tabs-constant">风格:</span>
						        <span class="pro-tabs-variable">世界式</span>
						    </li>
						        <li>
						            <span class="pro-tabs-constant">款式定位:</span>
						            <span class="pro-tabs-variable">现代</span>
						        </li>
						</ul>
					</div>
                    <div class="am-tab-panel" id="tab3">
						<ul>
						    <li>
						            <span class="pro-tabs-constant">品牌:</span>
						            <span class="pro-tabs-variable">雅诗兰黛</span>
						        </li>
						        <li>
						            <span class="pro-tabs-constant">是否组装:</span>
						            <span class="pro-tabs-variable">NO</span>
						        </li>
						        <li>
						            <span class="pro-tabs-constant">是否可定制:</span>
						            <span class="pro-tabs-variable">yes</span>
						        </li>
						        <li>
						            <span class="pro-tabs-constant">型号:</span>
						            <span class="pro-tabs-variable">0000007</span>
						        </li>
						        <li>
						            <span class="pro-tabs-constant">颜色分类:</span>
						            <span class="pro-tabs-variable">多彩</span>
						        </li>
						        <li>
						            <span class="pro-tabs-constant">设计元素:</span>
						            <span class="pro-tabs-variable">大师设计</span>
						        </li> <li>
						        <span class="pro-tabs-constant">风格:</span>
						        <span class="pro-tabs-variable">世界式</span>
						    </li>
						        <li>
						            <span class="pro-tabs-constant">款式定位:</span>
						            <span class="pro-tabs-variable">现代</span>
						        </li>
						</ul>
					</div>
                    <div class="am-tab-panel" id="tab4">
						<ul>
						    <li>
						            <span class="pro-tabs-constant">品牌:</span>
						            <span class="pro-tabs-variable">雅诗兰黛</span>
						        </li>
						        <li>
						            <span class="pro-tabs-constant">是否组装:</span>
						            <span class="pro-tabs-variable">NO</span>
						        </li>
						        <li>
						            <span class="pro-tabs-constant">是否可定制:</span>
						            <span class="pro-tabs-variable">yes</span>
						        </li>
						        <li>
						            <span class="pro-tabs-constant">型号:</span>
						            <span class="pro-tabs-variable">0000007</span>
						        </li>
						        <li>
						            <span class="pro-tabs-constant">颜色分类:</span>
						            <span class="pro-tabs-variable">多彩</span>
						        </li>
						        <li>
						            <span class="pro-tabs-constant">设计元素:</span>
						            <span class="pro-tabs-variable">大师设计</span>
						        </li> <li>
						        <span class="pro-tabs-constant">风格:</span>
						        <span class="pro-tabs-variable">世界式</span>
						    </li>
						        <li>
						            <span class="pro-tabs-constant">款式定位:</span>
						            <span class="pro-tabs-variable">现代</span>
						        </li>
						</ul>
					</div>
                </div>
            </div>
        </main>
    </aside>


</section>

















<jsp:include page="/footerServlet"></jsp:include>



</body>
</html>